<template>
	<view class="box">

		<view class="detail_box shopro-selector">
			<view class="detail-content">
				<view class="goodes_detail_swiper-box">
					<!-- 详情轮播 -->
					<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
						<swiper-item @tap="tools.previewImage(goodsInfo.carouselFigurePhotos, swiperCurrent)" v-for="(img, index) in goodsInfo.carouselFigurePhotos"
						 :key="index" class="carousel-item">
							<image class="swiper-image shopro-selector-rect" :src="baseUrl+img" mode="aspectFill" lazy-load></image>
						</swiper-item>
					</swiper>
					<view v-if="goodsInfo.carouselFigurePhotos" class="swiper-dots">{{ swiperCurrent + 1 }} / {{ goodsInfo.carouselFigurePhotos.length }}</view>
				</view>

				<!-- 价格卡片组 -->
				<vc-price v-if="goodsInfo" :detail="goodsInfo" :type="detailType" @change="getActivityRules"></vc-price>
				<view class="goods-title more-t">{{ goodsInfo.actProdName }}</view>
				<view class="sub-title more-t">{{ goodsInfo.actProdDesc }}</view>
				<!-- 规格选择 -->
				<view class="sku-box shopro-selector-rect" @tap="showSku = true">
					<view class="flex justify-between">
						<view class="flex justify-between">
							<text class="title">规格</text>
							<text class="tip">{{ goodsInfo.defaultSpecValue.name || '请选择规格' }}</text>
						</view>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<vc-sku v-model="showSku" :goodsInfo="goodsInfo" 
				:buyType="buyType"
				:skuList="goodsInfo.productSpecValues"
				 :grouponBuyType="grouponBuyType" 
				 :goodsType="goodsInfo.actType"
				 @changeBalance="changeBalance"
				 @changeType="changeType"
				 @getSkuText="getSkuText"
				 @chooseSku="_chooseSku"></vc-sku>
				<!-- 服务 -->
				<vc-serve v-if="goodsInfo.service.length" v-model="showServe" :serveList="goodsInfo.service"></vc-serve>

				<!-- 选项卡 -->
				<view class="sticky-box">
					<view class="tab-box flex justify-between ">
						<view class="tab-item flex flex-direction align-center <justify-center></justify-center> x-c" @tap="onTab(tab.id)" v-for="tab in tabList" :key="tab.id">
							<view class="tab-title">
								{{ tab.title }}
								<text v-if="tab.id == 'tab2'" class="comment-num">({{ commentNum }})</text>
							</view>
							<text class="tab-line" :class="{ 'line-active': tabCurrent === tab.id }"></text>
						</view>
					</view>
					<view class="tab-detail pb20">
						<view class="rich-box" v-show="tabCurrent === 'tab0'">
							<jyf-parser :html="goodsInfo.content" ref="article"></jyf-parser>
						</view>
						<view class="goods-size" v-if="tabCurrent === 'tab1'">
							<view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
								<view class="t-tr x-f" v-for="t in goodsInfo.params" :key="t.title">
									<view class="t-head x-f">{{ t.title }}</view>
									<view class="t-detail">{{ t.content }}</view>
								</view>
							</view>
						</view>
						<view class="goods-comment" v-if="tabCurrent === 'tab2'">
							<block v-for="comment in commentList" :key="comment.id">
								<sh-comment :comment="comment"></sh-comment>
							</block>
							<view class="empty-box x-c" v-if="!commentList.length">
								<vc-empty :isFixed="false" :emptyData="emptyData"></vc-empty>
							</view>
							<view class="more-box x-c" v-if="commentList.length">
								<button class="cu-btn more-btn x-f" @tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })">
									查看全部
									<text class="cuIcon-right"></text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 其他商品foot -->
			<view class="detail-foot_box flex align-center" >
				<view class="detail-right ">
					<view class="detail-btn-box flex justify-end" v-if="!goodsInfo.activity">
						<button class="cu-btn tool-btn add-btn" @tap="addCart">加入购物车</button>
						<button class="cu-btn tool-btn pay-btn" v-if="!balance" @tap="goPay">立即购买</button>
						<button class="cu-btn tool-btn pay-btn" v-else @tap="goBalance">结算</button>
					</view>
					<!-- 拼团foot -->
					<view class="detail-btn-box flex justify-end" v-if="goodsInfo.activity && goodsInfo.activity.type === 'groupon'">
						<button class="cu-btn  seckilled-btn" v-if="activityRules.status == 'waiting'">暂未开始</button>
						<button class="cu-btn  seckilled-btn" v-if="activityRules.status == 'end'">已结束</button>
						<view class="x-f" v-if="activityRules.status == 'ing'">
							<button class="cu-btn tool-btn add-btn y-f" @tap="payGroupon" v-if="goodsInfo.activity.rules.is_alone === '1'">
								<text class="price">￥{{ goodsInfo.price }}</text>
								<text class="price-title">单独购买</text>
							</button>
							<button class="cu-btn tool-btn groupon-btn y-f" :style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''"
							 @tap="payGroupon('groupon')">
								<text class="price">￥{{ goodsInfo.groupon_price }}</text>
								<text class="price-title">我要开团</text>
							</button>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import vcPrice from '@/components/vc-price/vc-price.vue';
	import vcServe from '@/components/vc-serve/vc-serve.vue';

	import vcComment from '@/components/vc-comment/vc-comment.vue';
	import vcSku from '@/components/vc-sku/vc-sku.vue';

	import vcEmpty from '@/components/vc-empty/vc-empty.vue';
	
	import jyfParser from "@/components/jyf-parser/jyf-parser";

	import {
		getProduct
	} from '../../api/goods/goodsApi.js';
	
	import conf from '../../conf/config.js';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			vcServe,
			vcPrice,
			vcSku,
			vcComment,
			vcEmpty,
			jyfParser
		},
		data() {
			return {
				productId: '',
				baseUrl:conf.baseUrl,
				currentSkuText: '', //选中规格
				detailType: '',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showSku: false,
				showServe: false,
				tools: this.$tools,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				emptyData: {
					img: '/static/imgs/empty/comment_empty.png',
					tip: '暂无评价~'
				},
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				],
				balance:false
				
			};
		},
		computed: {
			
		},
		onLoad(options) {
			this.productId = options.productId;
			this.getGoodsDetail();

		},
		onReady() {},
		methods: {
			getActivityRules:function(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 检测
			checkActivity:function(data, type) {
				if (data) {
					return !data.includes(type);
				}
				return true;
			},
			// 路由跳转
			jump:function(path, parmas) {
				this.showShare = false;
			},
			// 轮播图切换
			swiperChange:function(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			// 选项卡
			onTab:function(id) {
				this.tabCurrent = id;
			},
			// 商品详情
			getGoodsDetail:function() {
				let that = this;
				let _data = {
					page: 1,
					row: 1,
					productId: this.productId
				}
				getProduct(_data)
					.then(_product => {
						that.goodsInfo = _product[0];
						that.goodsInfo.productSpecValues.forEach(item=>{
							let _productSpecDetails = item.productSpecDetails;
							let _name = "";
							_productSpecDetails.forEach(detail =>{
								_name += (detail.detailValue +"/");
							})
							
							item.name = _name;
						})
					});
				that.getCommentList();
			},
			// 商品评论
			getCommentList:function() {
				let that = this;
			},
			// 组件返回的type;
			changeType:function(e) {
				this.buyType = e;
			},
			// 组件返回的规格;
			getSkuText:function(e) {
				this.currentSkuText = e;
			},
			_chooseSku:function(sc){
				this.goodsInfo.productSpecValues.forEach(item=>{
					item.isDefault = 'F';
					if(item.valueId == sc.valueId){
						item.isDefault = 'T';
						this.goodsInfo.defaultSpecValue = item;
					}
				});
			},
			// 分享
			onShare:function() {
				this.showShare = true;
			},
			// 加入购物车
			addCart:function() {
				if (this.vc.hasLogin()) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.vc.navigateTo({
						url:'/pages/showlogin/showlogin'
					})
				}
			},
			// 立即购买
			goPay:function() {
				if (this.vc.hasLogin()) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.vc.navigateTo({
						url:'/pages/showlogin/showlogin'
					})
				}
			},
			goBalance:function(){
				this.vc.navigateTo({
					url: '/pages/goodsConfirm/goodsConfirm'
				})
			},
			// 拼团购买
			payGroupon:function(type) {
				if (Boolean(uni.getStorageSync('token'))) {
					if (type === 'groupon') {
						this.grouponBuyType = 'groupon';
					} else {
						this.grouponBuyType = 'alone';
					}
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
			},
			// 立即秒杀。
			goSeckill:function() {
				if (Boolean(uni.getStorageSync('token'))) {
					if (this.activityRules.status !== 'waiting') {
						this.buyType = 'buy';
						this.showSku = true;
						console.log(this.buyType);
					} else {
						this.$tools.toast('秒杀暂未开始');
					}
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
			},
			changeBalance:function(e){
				this.balance = e;
			}
		}
	};
</script>

<style lang="scss">
	.box {
		padding-bottom: 100rpx;
	}

	// 拼团玩法
	.groupon-play {
		height: 94rpx;
		background: #fff;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			margin-left: 30rpx;
		}

		.cuIcon-right {
			margin-left: 20rpx;
		}
	}

	.load-box {
		/deep/.skeletons_box {
			z-index: 11;
		}
	}

	.detail-content {
		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}

	.sticky-box {
		.tab-box {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			z-index: 99;
		}
	}

	// 商品图片轮播

	.goodes_detail_swiper-box {
		width: 100%;
		height: 500rpx;
		position: relative;

		.carousel {
			width: 100%;
			height: 100%;
		}

		.carousel-item {
			width: 750rpx;
			height: 100%;
		}

		.swiper-image {
			width: 750rpx;
			height: 100%;
			background: #ccc;
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			line-height: 44rpx;
			border-radius: 22rpx;
			padding: 0 15rpx;
			background: rgba(#333, 0.3);
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 20rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}

		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}

	.goods-title {
		font-size: 36rpx;
		font-weight: 600;
		line-height: 42rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
		padding: 20rpx 20rpx;
	}

	.sub-title {
		padding: 0 20rpx;
		color: #a8700d;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 20rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 20rpx;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}

	.tab-detail {
		min-height: 300rpx;
		background: #fff;
		background: #fff;

		.rich-box {
			/deep/ img {
				display: block;
			}
		}

		.goods-size {
			padding-top: 30rpx;

			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
						border-right: 1rpx solid rgba(223, 223, 223, 1);
					}

					.t-detail {
						font-size: 26rpx;
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		.goods-comment {
			padding-top: 30rpx;
			min-height: 300rpx;

			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;

					.cuIcon-right {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	// 推荐商品
	.guess-box {
		.guess-title {
			height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			background: #fff;
			padding: 0 20rpx;
		}

		.goods-wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			.goods-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}

	// 积分底部栏
	.score-foot-box {
		height: 110rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.btn-box {
			flex: 1;

			.seckill-btn {
				width: 600rpx;
				height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}
		}
	}

	// 底部工具栏
	.detail-foot_box {
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		width: 100%;
		position: fixed;
		bottom: 0;
		//z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;

				.price {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			}

			.seckill-btn {
				width: 432rpx;
				height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
</style>
